"use client"
import { useState } from 'react';
import {axios} from '@/Global'
import {useRouter } from 'next/navigation'

export default function Window() {
  const router = useRouter();



  //注册APP应用
  const [apps, setApps] = useState({
    organization:{
      open:false
    },
    folder:{
      open:false,
      icon:new URL('/static/images/folder-sm.png', import.meta.url),
      title:'作业目录'
    },
    viewPicture:{
      open:false,
      icon:'/static/images/folder-sm.png', 
    },
    codedFile:{
      icon:'/static/images/folder-sm.png',
      open:false
    },
    vidSm:{
      open:false,
    }
  })

  //桌面上显示的图标
  const [desktopIcon, setdesktopIcon]  = useState([
    {
        'icon':new URL('/static/images/user.png', import.meta.url),
        'name':'我的班级',
        'id':'organization',
    },
    {
        'icon':new URL('/static/images/bin0.png', import.meta.url),
        'name':'回收站',
        'id':'recycle',
    },
    {
      
        'icon':new URL('/static/images/github.png', import.meta.url),
        'name':'源码地址',
        'id':'sourceCode',
        height:800,
        width:1200
    },
    {
        'icon':new URL('/static/images/vid-sm.png', import.meta.url),
        'name':'西瓜视频',
        'id':'vidSm',
        height:600,
        width:800
    }
  ]);
  


  function openApp(item:any){
    router.push('/login')
    console.log(item);
  }

  const listItems = desktopIcon.map((item,key) => 
    <div key={key}  className="desktopIcon" onClick={e=>{ openApp(item)}}>
      <div className="img"  style={{ backgroundImage: 'url('+item.icon+')' }}></div>
      <div className="name">{item.name}</div>
    </div>
  );

  return (
    <div className="windowBg">
      <div className="window">
        <div className="desktopIconWrap">{listItems}</div>
      </div>
    </div>    
  );
}